<template>
  <el-dialog :title="dialogTitle" width="80%" :visible.sync="dialogVisible">
    <el-form
      :inline="true"
      :model="queryForm"
      class="demo-form-inline"
      size="small"
    >
      <el-form-item label="决策样本集编号：">
        <el-input
          maxlength="30"
          v-max-length-tip="30"
          v-model="queryForm.jcybjID"
          placeholder="请输入决策样本集编号"
        ></el-input>
      </el-form-item>

      <el-form-item label="需求场景：">
        <el-input
          maxlength="30"
          v-max-length-tip="30"
          v-model="queryForm.xqcj"
          placeholder="请输入需求场景"
        ></el-input>
      </el-form-item>
      <el-form-item label="目标所属区域：">
        <el-input
          maxlength="30"
          v-max-length-tip="30"
          v-model="queryForm.mbssdlqy"
          placeholder="请输入目标所属区域"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="cleanSubmit">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="iconHadler"
      @selection-change="handleSelectionChange"
      @expand-change="handleExpendChange"
      row-key="id"
      :expand-row-keys="rowKeyId"
      stripe
      class="mainTable"
      height="40vh"
      ref="multipleTable"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="tableData[props.$index].jcybList"
            style="width: 100%"
          >
            <el-table-column
              show-overflow-tooltip
              label="决策样本编号"
              prop="jcybID"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="是否合作目标"
              prop="sfhzmb"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="任务类型"
              prop="rwlx"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="目标形态"
              prop="mbxt"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="气象条件"
              prop="qxtj"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="攻击因素"
              prop="gjys"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="载荷类型"
              prop="zhlx"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="观测模式"
              prop="gcms"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="分辨率(m)"
              prop="fbl"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="优先级"
              prop="yxj"
            ></el-table-column>
          </el-table>
          <!--小型分页-->
          <div class="subSmallPage">
            <el-pagination
              @current-change="SubHandleCurrentChange"
              :current-page.sync="subCurtent"
              small
              :page-size="subSize"
              layout="prev, pager, next"
              :total="subtotal"
            ></el-pagination>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="序号"
        type="index"
        width="55"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="决策样本集编号"
        prop="jcybjID"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="需求场景"
        prop="xqcj"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="目标所属地理区域"
        prop="mbssdlqy"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="样本数量"
        prop="ybsl"
      ></el-table-column>
    </el-table>
    <footer class="fl_row_start">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </footer>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleComplete">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  getJcybPageApi,
  subJcybPageApi
} from '@/views/sampleManagement/decision/api'
export default {
  props: {
    num1: {
      type: Number,
      default: 0
    },
    dialogTitle: {
      type: String,
      default: ''
    },
    completeCallback: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      multipleSelection: [],
      pageCurrent: 1,
      pageSize: 10,
      total: 0,
      queryForm: {
        jcybjID: '',
        xqcj: '',
        mbssdlqy: ''
      },
      subCurtent: 1,
      subSize: 100,
      subtotal: 0,
      rowKeyId: []
    }
  },
  watch: {},
  mounted() {
    this.getJcybPageData(this.queryForm)
  },
  methods: {
    // 控制每次只能展开一个表格
    handleExpendChange(row) {
      if (!this.rowKeyId[0] || row.id !== this.rowKeyId[0]) {
        this.rowKeyId = []
        this.rowKeyId.push(row.id)
      } else {
        this.rowKeyId = []
      }
      this.jcybjId = row.id
      this.subCurtent = 1
      this.subSize = 100
      this.subJcybPageData()
    },
    subJcybPageData() {
      const data = {
        jcybjId: this.jcybjId,
        pageCurrent: this.subCurtent,
        pageSize: this.subSize
      }
      subJcybPageApi(data).then(res => {
        if (res.data.code === 200) {
          this.tableData.forEach((item, index) => {
            if (item.id === this.jcybjId) {
              this.tableData[index].jcybList = res.data.data.records
              this.subtotal = res.data.data.total
            }
          })
        }
      })
    },
    SubHandleCurrentChange(val) {
      this.subCurtent = val
      this.subJcybPageData()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.getJcybPageData(this.queryForm)
    },
    handleComplete() {
      let type = null
      if (this.dialogTitle == '选择训练集') {
        type = 1
      } else if (this.dialogTitle == '选择测试集') {
        type = 2
      }
      this.$emit('completeCallback', {
        data: this.multipleSelection,
        type: type
      })
      this.$refs.multipleTable.clearSelection()
      this.dialogVisible = false
    },
    onSubmit() {
      this.pageCurrent = 1
      this.getJcybPageData(this.queryForm)
    },
    cleanSubmit() {
      this.pageCurrent = 1
      this.queryForm = {
        jcybjID: '',
        xqcj: '',
        mbssdlqy: ''
      }
      this.getJcybPageData(this.queryForm)
    },
    getJcybPageData(data) {
      const query = {
        pageCurrent: this.pageCurrent,
        pageSize: this.pageSize,
        ...data
      }
      getJcybPageApi(query).then(res => {
        if (res.data.code === 200) {
          const data = res.data
          this.tableData = data.data.records
          this.total = data.data.total
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val // 可以将选中项保存到data中的某个属性，便于后续使用

      // 如果选中项数组长度大于1，则只保留最后一个选中项
      if (val.length > 1) {
        // 取消选中之前所有项
        val.forEach(key => {
          if (key !== val[val.length - 1]) {
            // 保留最后一个选中项
            this.$refs.multipleTable.toggleRowSelection(key, false)
          }
        })

        // 注意：在Element UI的某些版本中，上面的循环可能不足以完全取消选中，
        // 因为toggleRowSelection可能在内部进行了优化。此时，可以直接设置选中项数组
        this.$refs.multipleTable.clearSelection() // 清除所有选中项（如果需要）
        this.$refs.multipleTable.toggleRowSelection(val[val.length - 1], true) // 仅选中最后一个项
      }
    },
    //判断子数组中是否有数据，没有就不显示展开按钮
    iconHadler({ row }) {
      if (!row.subState || row.subState !== '1') {
        return 'icon-no'
      }
    }
  }
}
</script>

<style scoped>
::v-deep .el-table .el-table__header-wrapper .el-table__header th .el-checkbox {
  display: none;
}
</style>
